<template>
  <div class='userdetail'>
    <el-breadcrumb class='breadcrumb' separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >用户列表</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <h2 class="headline">用户信息</h2>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="基本信息" name="1">
        <div class='baseinfo'>
          <!-- 背景图 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                背景图
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="imgbg"></div>
              </div>
            </el-col>
          </el-row>
          <!-- 介绍 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                介绍
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="introduce">
                  <el-row>
                    <el-col :span='1' class='star'>
                      开始
                    </el-col>
                    <el-col :span='10'>
                      <el-slider v-model="value1"></el-slider>
                    </el-col>
                    <el-col :span='2' class='time'>
                      00:30
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- 头像 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                头像
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="imgavatar"></div>
              </div>
            </el-col>
          </el-row>
          <!-- 昵称 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                昵称
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="desc">杭州路况</div>
              </div>
            </el-col>
          </el-row>
          <!-- 城市 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                城市
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="desc">武汉</div>
              </div>
            </el-col>
          </el-row>
          <!-- 签名 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                签名
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="desc">声音是有温度的，夜晚的声音会发光</div>
              </div>
            </el-col>
          </el-row>
          <!-- 粉丝 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                粉丝
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="fansavatar">
                  <fansavatar :isdesc="true"></fansavatar>
                  <fansavatar :isdesc="true"></fansavatar>
                  <fansavatar :isdesc="true"></fansavatar>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- 关注 -->
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="left">
                关注
              </div>
            </el-col>
            <el-col :span="22">
              <div class="right">
                <div class="fansavatar">
                  <fansavatar :isdesc="true"></fansavatar>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="动态信息" name="2">
        <div class='mutilinfo'>
          <messageboard></messageboard>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import fansavatar from 'components/fansavatar/fansavatar';
import messageboard from 'components/messageboard/messageboard';
export default {
  name: 'userdetail',
  data() {
    return {
      activeNames: ['1'],
      value1: 22
    };
  },
  components: {
    fansavatar,
    messageboard
  },
  methods: {
    handleChange() {
      console.log(123);
    }
  }
};
</script>
<style lang="less" scoped>
.userdetail {
  .baseinfo {
    .left {
      line-height: 38px;
    }
    .right {
      .imgbg {
        width: 20%;
        height: 100px;
        background: #999;
      }
      .introduce {
        .star {
          line-height: 38px;
        }
        .time {
          line-height: 38px;
          padding-left: 10px;
        }
      }
      .imgavatar {
        width: 100px;
        height: 100px;
        background: #999;
      }
      .desc {
        line-height: 38px;
      }
    }
  }
}
</style>
